<template>
    <div class="login-container">
        <!-- Three.js 背景 -->
        <ThreeBackground />
        
        <!-- 网站头部 -->
        <header class="site-header">
            <div class="header-content">
                <div class="header-left">
                    <div class="logo">
                        <el-icon class="logo-icon"><Trophy /></el-icon>
                        <span class="logo-text">比赛报名费用管理系统</span>
                    </div>
                </div>
                <div class="header-right">
                    <nav class="nav-menu">
                        <a href="#" class="nav-link">首页</a>
                        <a href="#" class="nav-link">功能介绍</a>
                        <a href="#" class="nav-link">联系我们</a>
                        <a href="#" class="nav-link">帮助中心</a>
                    </nav>
                    <div class="header-actions">
                        <el-button type="primary" plain size="small" class="help-btn">
                            <el-icon><QuestionFilled /></el-icon>
                            帮助
                        </el-button>
                    </div>
                </div>
            </div>
        </header>


        
        <div class="login-content">
            <div class="login-card">
                <!-- 登录方式切换 -->
                <div class="login-tabs">
                    <div 
                        class="tab-item" 
                        :class="{ active: currentLoginMethod === 'qrcode' }"
                        @click="switchLoginMethod('qrcode')">
                        扫码登录
                    </div>
                    <div 
                        class="tab-item" 
                        :class="{ active: currentLoginMethod === 'phone' }"
                        @click="switchLoginMethod('phone')">
                        手机验证
                    </div>
                    <div 
                        class="tab-item" 
                        :class="{ active: currentLoginMethod === 'password' }"
                        @click="switchLoginMethod('password')">
                        账号密码
                    </div>
                </div>

                <!-- 扫码登录 -->
                <div v-if="currentLoginMethod === 'qrcode'" class="qrcode-login">
                    <div class="qrcode-content">
                        <div class="qrcode-left">
                            <div class="qrcode-header">
                                <h2 class="qrcode-title">扫码登录</h2>
                                <h3 class="qrcode-subtitle">安全便捷</h3>
                            </div>
                            <p class="qrcode-desc">
                                无需记住密码，只需使用手机扫描二维码，即可快速安全地登录您的账户。保护您的隐私，简化您的登录流程。
                            </p>
                            <div class="feature-cards">
                                <div class="feature-card">
                                    <div class="feature-icon">
                                        <el-icon><Lock /></el-icon>
                                    </div>
                                    <div class="feature-text">多重加密保护您的账户</div>
                                </div>
                                <div class="feature-card">
                                    <div class="feature-icon">
                                        <el-icon><Right /></el-icon>
                                    </div>
                                    <div class="feature-text">无需输入密码，一键登录</div>
                                </div>
                            </div>
                        </div>
                        <div class="qrcode-right">
                            <div class="qrcode-container">
                                <div class="qrcode-wrapper">
                                    <!-- 加载状态 -->
                                    <div v-if="qrCodeStatus === 'loading'" class="qrcode-placeholder">
                                        <el-icon class="qrcode-icon"><Loading /></el-icon>
                                        <div class="qrcode-text">二维码生成中...</div>
                                    </div>
                                    
                                    <!-- 错误状态 -->
                                    <div v-else-if="qrCodeStatus === 'error'" class="qrcode-placeholder">
                                        <el-icon class="qrcode-icon"><Warning /></el-icon>
                                        <div class="qrcode-text">生成失败</div>
                                        <el-button size="small" @click="refreshQrCode" class="refresh-btn">
                                            重新生成
                                        </el-button>
                                    </div>
                                    
                                    <!-- 过期状态 -->
                                    <div v-else-if="qrCodeStatus === 'expired'" class="qrcode-placeholder">
                                        <el-icon class="qrcode-icon"><Clock /></el-icon>
                                        <div class="qrcode-text">二维码已过期</div>
                                        <el-button size="small" @click="refreshQrCode" class="refresh-btn">
                                            重新生成
                                        </el-button>
                                    </div>
                                    
                                    <!-- 已扫描状态 -->
                                    <div v-else-if="qrCodeStatus === 'scanned'" class="qrcode-placeholder">
                                        <el-icon class="qrcode-icon"><Check /></el-icon>
                                        <div class="qrcode-text">已扫描，等待确认</div>
                                        <div class="scanning-animation"></div>
                                    </div>
                                    
                                    <!-- 已确认状态 -->
                                    <div v-else-if="qrCodeStatus === 'confirmed'" class="qrcode-placeholder">
                                        <el-icon class="qrcode-icon"><SuccessFilled /></el-icon>
                                        <div class="qrcode-text">登录成功！</div>
                                    </div>
                                    
                                    <!-- 正常状态 - 显示二维码 -->
                                    <div v-else class="qrcode-display">
                                        <div class="qrcode-image">
                                            <!-- 这里应该显示真实的二维码图片 -->
                                            <img v-if="qrCodeData" :src="qrCodeData" alt="登录二维码" />
                                            <div v-else class="qrcode-fallback">
                                                <el-icon class="qrcode-icon"><Picture /></el-icon>
                                                <div class="qrcode-text">二维码加载中...</div>
                                            </div>
                                        </div>
                                        <el-button size="small" @click="refreshQrCode" class="refresh-btn">
                                            刷新二维码
                                        </el-button>
                                    </div>
                                </div>
                                <p class="qrcode-instruction">请使用手机APP扫描二维码登录</p>
                                <div class="qrcode-timer">
                                    <el-icon class="timer-icon"><Clock /></el-icon>
                                    <span>{{ qrCodeTimer }}秒后二维码将自动刷新</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 手机验证登录 -->
                <div v-if="currentLoginMethod === 'phone'" class="phone-login">
                    <div class="phone-content">
                        <div class="phone-header">
                            <h2 class="phone-title">手机验证登录</h2>
                            <p class="phone-subtitle">通过手机验证码快速登录</p>
                        </div>
                        <el-form :model="phoneForm" :rules="phoneRules" ref="phoneFormRef" class="phone-form">
                            <el-form-item prop="phone" class="form-item">
                                <el-input 
                                    v-model="phoneForm.phone" 
                                    placeholder="请输入手机号码" 
                                    prefix-icon="Phone"
                                    size="large"
                                    class="login-input" />
                            </el-form-item>
                            <el-form-item prop="code" class="form-item">
                                <div class="code-input-group">
                                    <el-input 
                                        v-model="phoneForm.code" 
                                        placeholder="请输入验证码" 
                                        prefix-icon="Key"
                                        size="large"
                                        class="code-input" />
                                    <el-button 
                                        type="primary" 
                                        :disabled="codeCountdown > 0"
                                        @click="sendCode"
                                        class="send-code-btn">
                                        {{ codeCountdown > 0 ? `${codeCountdown}s` : '获取验证码' }}
                                    </el-button>
                                </div>
                            </el-form-item>
                            <el-form-item class="form-item">
                                <el-button 
                                    type="primary" 
                                    class="login-button" 
                                    :loading="loading" 
                                    @click="handlePhoneLogin"
                                    size="large">
                                    <el-icon v-if="!loading"><Right /></el-icon>
                                    {{ loading ? '登录中...' : '立即登录' }}
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <!-- 账号密码登录 -->
                <div v-if="currentLoginMethod === 'password'" class="password-login">
                    <div class="password-content">
                        <div class="password-header">
                            <h2 class="password-title">账号密码登录</h2>
                            <p class="password-subtitle">使用用户名和密码登录</p>
                        </div>
                        
                        <!-- 登录/注册切换 -->
                        <div class="auth-switch">
                            <div class="switch-tabs">
                                <div 
                                    class="switch-tab" 
                                    :class="{ active: !isRegister }"
                                    @click="switchToLogin">
                                    登录
                                </div>
                                <div 
                                    class="switch-tab" 
                                    :class="{ active: isRegister }"
                                    @click="switchToRegister">
                                    注册
                                </div>
                            </div>
                        </div>

                        <el-form :model="formData" :rules="currentRules" ref="formRef" class="login-form">
                            <el-form-item prop="username" class="form-item">
                                <el-input 
                                    v-model="formData.username" 
                                    :placeholder="isRegister ? '请输入用户名（3-20位）' : '请输入用户名'" 
                                    prefix-icon="User"
                                    size="large"
                                    class="login-input" />
                            </el-form-item>

                            <el-form-item prop="password" class="form-item">
                                <el-input 
                                    v-model="formData.password" 
                                    type="password" 
                                    :placeholder="isRegister ? '请输入密码（8位以上）' : '请输入密码'" 
                                    prefix-icon="Lock"
                                    show-password
                                    size="large"
                                    class="login-input"
                                    @focus="showPasswordTips = true"
                                    @blur="hidePasswordTips" />
                                
                                <!-- 密码要求提示框 -->
                                <div v-if="showPasswordTips && isRegister" class="password-tips-popup">
                                    <div class="tips-header">
                                        <el-icon><InfoFilled /></el-icon>
                                        <span>密码要求</span>
                                    </div>
                                    <ul class="tips-list">
                                        <li :class="{ valid: passwordValid.length }">长度至少8位</li>
                                        <li :class="{ valid: passwordValid.uppercase }">必须包含大写字母</li>
                                        <li :class="{ valid: passwordValid.lowercase }">必须包含小写字母</li>
                                        <li :class="{ valid: passwordValid.number }">必须包含数字</li>
                                        <li :class="{ valid: passwordValid.special }">必须包含特殊字符</li>
                                    </ul>
                                </div>
                            </el-form-item>

                            <!-- 注册时显示确认密码 -->
                            <el-form-item v-if="isRegister" prop="confirmPassword" class="form-item">
                                <el-input 
                                    v-model="formData.confirmPassword" 
                                    type="password" 
                                    placeholder="请确认密码" 
                                    prefix-icon="Lock"
                                    show-password
                                    size="large"
                                    class="login-input" />
                            </el-form-item>

                            <!-- 注册时显示邮箱 -->
                            <el-form-item v-if="isRegister" prop="email" class="form-item">
                                <el-input 
                                    v-model="formData.email" 
                                    placeholder="请输入邮箱地址" 
                                    prefix-icon="Message"
                                    size="large"
                                    class="login-input" />
                            </el-form-item>

                            <!-- 登录时显示选项 -->
                            <div v-if="!isRegister" class="login-options">
                                <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
                                <el-checkbox v-model="autoLogin">自动登录</el-checkbox>
                            </div>

                            <el-form-item class="form-item">
                                <el-button 
                                    type="primary" 
                                    class="login-button" 
                                    :loading="loading" 
                                    @click="handleSubmit"
                                    size="large">
                                    <el-icon v-if="!loading"><Right /></el-icon>
                                    {{ loading ? (isRegister ? '注册中...' : '登录中...') : (isRegister ? '立即注册' : '立即登录') }}
                                </el-button>
                            </el-form-item>
                        </el-form>

                        <!-- 底部提示 -->
                        <div class="auth-footer">
                            <p v-if="!isRegister" class="auth-tip">
                                还没有账号？<span class="link-text" @click="switchToRegister">立即注册</span>
                            </p>
                            <p v-else class="auth-tip">
                                已有账号？<span class="link-text" @click="switchToLogin">立即登录</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 固定在底部的版权信息 -->
        <div class="footer-copyright">
            <p class="footer-text">© 2024 比赛报名费用管理系统. All rights reserved.</p>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import ThreeBackground from '../components/ThreeBackground.vue'
import { 
    User, Lock, Trophy, InfoFilled, Right, Message, QuestionFilled, 
    Picture, Clock, Phone, Key, Loading, Warning, Check, SuccessFilled 
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const formRef = ref(null)
const phoneFormRef = ref(null)
const loading = ref(false)

// 登录方式
const currentLoginMethod = ref('qrcode')

// 账号密码登录相关
const isRegister = ref(false)
const formData = reactive({
    username: '',
    password: '',
    confirmPassword: '',
    email: ''
})

// 手机验证登录相关
const phoneForm = reactive({
    phone: '',
    code: ''
})

const phoneRules = {
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { len: 6, message: '验证码为6位数字', trigger: 'blur' }
    ]
}

// 验证码倒计时
const codeCountdown = ref(0)
let countdownTimer = null

// 二维码倒计时
const qrCodeTimer = ref(60)
let qrCodeTimerInterval = null

// 记住密码和自动登录选项
const rememberPassword = ref(false)
const autoLogin = ref(false)

// 密码提示显示控制
const showPasswordTips = ref(false)

// 密码验证状态
const passwordValid = computed(() => {
    const password = formData.password
    return {
        length: password.length >= 8,
        uppercase: /[A-Z]/.test(password),
        lowercase: /[a-z]/.test(password),
        number: /\d/.test(password),
        special: /[!@#$%^&*(),.?":{}|<>]/.test(password)
    }
})

// 隐藏密码提示的方法
const hidePasswordTips = () => {
    setTimeout(() => {
        showPasswordTips.value = false
    }, 200)
}

// 密码验证规则
const validatePassword = (rule, value, callback) => {
    const valid = passwordValid.value
    if (!valid.length) {
        callback(new Error('密码长度至少8位'))
    } else if (!valid.uppercase) {
        callback(new Error('密码必须包含大写字母'))
    } else if (!valid.lowercase) {
        callback(new Error('密码必须包含小写字母'))
    } else if (!valid.number) {
        callback(new Error('密码必须包含数字'))
    } else if (!valid.special) {
        callback(new Error('密码必须包含特殊字符'))
    } else {
        callback()
    }
}

const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { validator: validatePassword, trigger: 'blur' }
    ]
}

const currentRules = computed(() => {
    if (isRegister.value) {
        return {
            ...rules,
            confirmPassword: [
                { required: true, message: '请确认密码', trigger: 'blur' },
                { validator: (rule, value, callback) => {
                    if (value !== formData.password) {
                        callback(new Error('两次输入密码不一致'))
                    } else {
                        callback()
                    }
                }, trigger: 'blur' }
            ],
            email: [
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
            ]
        }
    }
    return rules
})

// 切换登录方式
const switchLoginMethod = (method) => {
    currentLoginMethod.value = method
    if (method === 'qrcode') {
        // 切换到扫码登录时生成二维码
        generateQrCode()
        startQrCodeTimer()
    } else {
        stopQrCodeTimer()
        // 停止轮询
        if (qrCodePollingTimer) {
            clearInterval(qrCodePollingTimer)
        }
    }
}

// 发送验证码
const sendCode = async () => {
    if (!phoneForm.phone) {
        ElMessage.warning('请先输入手机号码')
        return
    }
    
    try {
        // 模拟发送验证码
        ElMessage.success('验证码已发送到您的手机')
        codeCountdown.value = 60
        countdownTimer = setInterval(() => {
            codeCountdown.value--
            if (codeCountdown.value <= 0) {
                clearInterval(countdownTimer)
            }
        }, 1000)
    } catch (error) {
        ElMessage.error('发送验证码失败，请重试')
    }
}

// 手机验证登录
const handlePhoneLogin = async () => {
    if (!phoneFormRef.value) return

    try {
        await phoneFormRef.value.validate()
        loading.value = true

        // 模拟登录
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        userStore.setToken('mock-token')
        userStore.setUser({
            username: phoneForm.phone,
            role: 'admin',
            avatar: null
        })

        ElMessage.success('登录成功，欢迎回来！')
        router.push('/')
    } catch (error) {
        console.error(error)
        ElMessage.error('请填写正确的登录信息')
    } finally {
        loading.value = false
    }
}

// 开始二维码倒计时
const startQrCodeTimer = () => {
    qrCodeTimer.value = 60
    qrCodeTimerInterval = setInterval(() => {
        qrCodeTimer.value--
        if (qrCodeTimer.value <= 0) {
            qrCodeTimer.value = 60
            ElMessage.info('二维码已刷新，请重新扫描')
        }
    }, 1000)
}

// 停止二维码倒计时
const stopQrCodeTimer = () => {
    if (qrCodeTimerInterval) {
        clearInterval(qrCodeTimerInterval)
        qrCodeTimerInterval = null
    }
}

// 扫码登录相关
const qrCodeData = ref('')
const qrCodeStatus = ref('loading') // loading, ready, scanned, confirmed, expired
const qrCodeId = ref('')
let qrCodePollingTimer = null

// 生成二维码
const generateQrCode = async () => {
    try {
        // 1. 向后端请求生成二维码
        const response = await fetch('/api/qrcode/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                timestamp: Date.now()
            })
        })
        
        const data = await response.json()
        
        if (data.success) {
            qrCodeId.value = data.qrCodeId
            qrCodeData.value = data.qrCodeUrl // 二维码内容，通常是登录URL
            qrCodeStatus.value = 'ready'
            
            // 2. 开始轮询检查登录状态
            startQrCodePolling()
        } else {
            throw new Error(data.message || '生成二维码失败')
        }
    } catch (error) {
        console.error('生成二维码失败:', error)
        qrCodeStatus.value = 'error'
        ElMessage.error('生成二维码失败，请重试')
    }
}

// 轮询检查二维码状态
const startQrCodePolling = () => {
    qrCodePollingTimer = setInterval(async () => {
        try {
            const response = await fetch(`/api/qrcode/status/${qrCodeId.value}`)
            const data = await response.json()
            
            if (data.success) {
                switch (data.status) {
                    case 'pending':
                        // 二维码等待扫描
                        break
                    case 'scanned':
                        // 已扫描，等待确认
                        qrCodeStatus.value = 'scanned'
                        ElMessage.info('二维码已扫描，请在手机上确认登录')
                        break
                    case 'confirmed':
                        // 已确认，登录成功
                        qrCodeStatus.value = 'confirmed'
                        clearInterval(qrCodePollingTimer)
                        
                        // 获取用户信息并登录
                        await handleQrCodeLogin(data.userInfo)
                        break
                    case 'expired':
                        // 二维码已过期
                        qrCodeStatus.value = 'expired'
                        clearInterval(qrCodePollingTimer)
                        ElMessage.warning('二维码已过期，请重新生成')
                        break
                }
            }
        } catch (error) {
            console.error('检查二维码状态失败:', error)
        }
    }, 2000) // 每2秒检查一次
}

// 处理扫码登录成功
const handleQrCodeLogin = async (userInfo) => {
    try {
        // 设置用户信息
        userStore.setToken(userInfo.token)
        userStore.setUser({
            username: userInfo.username,
            role: userInfo.role,
            avatar: userInfo.avatar
        })
        
        ElMessage.success('扫码登录成功！')
        router.push('/')
    } catch (error) {
        console.error('扫码登录失败:', error)
        ElMessage.error('登录失败，请重试')
    }
}

// 刷新二维码
const refreshQrCode = () => {
    if (qrCodePollingTimer) {
        clearInterval(qrCodePollingTimer)
    }
    qrCodeStatus.value = 'loading'
    generateQrCode()
}

const switchToLogin = () => {
    isRegister.value = false
    formData.username = ''
    formData.password = ''
    formData.confirmPassword = ''
    formData.email = ''
    rememberPassword.value = false
    autoLogin.value = false
    showPasswordTips.value = false
}

const switchToRegister = () => {
    isRegister.value = true
    formData.username = ''
    formData.password = ''
    formData.confirmPassword = ''
    formData.email = ''
    rememberPassword.value = false
    autoLogin.value = false
    showPasswordTips.value = false
}

const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        loading.value = true

        if (isRegister.value) {
            // 注册逻辑
            await new Promise(resolve => setTimeout(resolve, 1500))
            
            // 模拟注册成功
            ElMessage.success('注册成功！请登录')
            switchToLogin()
        } else {
            // 登录逻辑
            await new Promise(resolve => setTimeout(resolve, 1500))
            
            userStore.setToken('mock-token')
            userStore.setUser({
                username: formData.username,
                role: 'admin',
                avatar: null
            })

            ElMessage.success('登录成功，欢迎回来！')
            router.push('/')
        }
    } catch (error) {
        console.error(error)
        ElMessage.error(error?.message || (isRegister.value ? '请填写正确的注册信息' : '请填写正确的登录信息'))
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    startQrCodeTimer()
})

onUnmounted(() => {
    stopQrCodeTimer()
    if (countdownTimer) {
        clearInterval(countdownTimer)
    }
    if (qrCodePollingTimer) {
        clearInterval(qrCodePollingTimer)
    }
})
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* 网站头部样式 */
.site-header {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--spacing-md) 0;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    font-size: 1.5rem;
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    padding: var(--spacing-xs);
    box-shadow: var(--shadow-sm);
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.nav-menu {
    display: flex;
    gap: var(--spacing-lg);
}

.nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: white;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.nav-link:hover::after {
    width: 100%;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.help-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.help-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}



.login-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    margin-bottom: 80px;
}

.login-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: slideInUp 0.6s ease-out;
    position: relative;
    width: 100%;
    max-width: 700px;
    transition: all 0.3s ease;
}

.login-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 登录方式切换 */
.login-tabs {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-md);
}

.tab-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.tab-item.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.tab-item:hover {
    color: var(--primary-color);
}

/* 扫码登录样式 */
.qrcode-login {
    width: 100%;
}

.qrcode-content {
    display: flex;
    gap: var(--spacing-2xl);
    align-items: flex-start;
}

.qrcode-left {
    flex: 1;
    padding-right: var(--spacing-xl);
}

.qrcode-header {
    margin-bottom: var(--spacing-lg);
}

.qrcode-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.qrcode-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.qrcode-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
    font-size: 0.9rem;
}

.feature-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feature-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.feature-text {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.qrcode-right {
    flex-shrink: 0;
    width: 200px;
}

.qrcode-container {
    text-align: center;
}

.qrcode-wrapper {
    width: 180px;
    height: 180px;
    margin: 0 auto var(--spacing-md) auto;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    position: relative;
}

.qrcode-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.qrcode-icon {
    font-size: 3rem;
    color: var(--text-disabled);
}

.qrcode-text {
    font-size: 0.8rem;
}

/* 扫码登录状态样式 */
.qrcode-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.qrcode-image {
    width: 160px;
    height: 160px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.qrcode-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qrcode-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
}

.refresh-btn {
    margin-top: var(--spacing-sm);
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.scanning-animation {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-top: var(--spacing-xs);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.qrcode-instruction {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-sm);
}

.qrcode-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.timer-icon {
    font-size: 0.8rem;
}

/* 手机验证登录样式 */
.phone-login {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.phone-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.phone-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.phone-subtitle {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.phone-form {
    width: 100%;
}

.code-input-group {
    display: flex;
    gap: var(--spacing-sm);
}

.code-input {
    flex: 1;
}

.send-code-btn {
    width: 120px;
    white-space: nowrap;
}

/* 账号密码登录样式 */
.password-login {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.password-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.password-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.password-subtitle {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.auth-switch {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.switch-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.switch-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.switch-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.login-form {
    margin-bottom: var(--spacing-xl);
}

.form-item {
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.login-input {
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.login-input :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.login-input :deep(.el-input__wrapper:hover) {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.login-input :deep(.el-input__wrapper.is-focus) {
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.password-tips-popup {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease-out;
}

.tips-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    color: var(--text-primary);
}

.tips-header .el-icon {
    color: var(--info-color);
}

.tips-list {
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style: none;
}

.tips-list li {
    position: relative;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.tips-list li::before {
    content: '○';
    position: absolute;
    left: -20px;
    color: var(--text-disabled);
    transition: all 0.3s ease;
}

.tips-list li.valid {
    color: var(--success-color);
    font-weight: 500;
}

.tips-list li.valid::before {
    content: '●';
    color: var(--success-color);
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.login-button {
    width: 100%;
    height: 48px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.login-button:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.login-button:active {
    transform: translateY(0);
}

.auth-footer {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-tip {
    margin: 0;
}

.link-text {
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
}

.footer-copyright {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--spacing-md) 0;
    text-align: center;
    z-index: 100;
}

.footer-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 400;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        padding: 0 var(--spacing-lg);
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .header-right {
        gap: var(--spacing-md);
    }
    
    .nav-menu {
        gap: var(--spacing-md);
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .login-content {
        padding: var(--spacing-lg);
        max-width: 100%;
    }
    
    .login-card {
        padding: var(--spacing-xl);
        max-width: 100%;
    }
    
    .qrcode-content {
        flex-direction: column;
        gap: var(--spacing-xl);
    }
    
    .qrcode-left {
        padding-right: 0;
    }
    
    .qrcode-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .qrcode-title {
        font-size: 1.5rem;
    }
    
    .qrcode-subtitle {
        font-size: 1.1rem;
    }
    
    .login-tabs {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-content {
        padding: 0 var(--spacing-md);
    }
    
    .nav-menu {
        display: none;
    }
    
    .login-content {
        padding: var(--spacing-md);
    }
    
    .login-card {
        padding: var(--spacing-lg);
    }
    
    .qrcode-title {
        font-size: 1.25rem;
    }
    
    .qrcode-subtitle {
        font-size: 1rem;
    }
    
    .feature-card {
        padding: var(--spacing-sm);
    }
    
    .feature-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .qrcode-wrapper {
        width: 150px;
        height: 150px;
    }
    
    .qrcode-icon {
        font-size: 2.5rem;
    }
    

}
</style>